<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = ref({
  username: '',
  password: '',
  confirmPassword: '',
})

const errors = ref({ username: '', password: '', confirmPassword: '', api: '' })
const isSubmitting = ref(false)

function validate() {
  errors.value = { username: '', password: '', confirmPassword: '', api: '' }
  if (!form.value.username) errors.value.username = '请输入用户名'
  if (!form.value.password) errors.value.password = '请输入密码'
  if (form.value.password && form.value.password.length < 6) errors.value.password = '密码至少6位'
  if (!form.value.confirmPassword) errors.value.confirmPassword = '请再次输入密码'
  if (form.value.password && form.value.confirmPassword && form.value.password !== form.value.confirmPassword) {
    errors.value.confirmPassword = '两次输入的密码不一致'
  }
  return !errors.value.username && !errors.value.password && !errors.value.confirmPassword
}

async function onSubmit() {
  if (!validate()) return
  isSubmitting.value = true
  errors.value.api = ''
  try {
    // TODO: 替换为真实接口调用
    await new Promise((r) => setTimeout(r, 600))
    router.push('/login')
  } catch (e) {
    errors.value.api = '注册失败，请重试'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<template>
  <div class="auth-container">
    <h2 class="auth-title">注册</h2>
    <form class="auth-form" @submit.prevent="onSubmit">
      <div class="form-item">
        <label>用户名</label>
        <input v-model.trim="form.username" type="text" placeholder="输入用户名" />
        <p v-if="errors.username" class="error">{{ errors.username }}</p>
      </div>
      <div class="form-item">
        <label>密码</label>
        <input v-model.trim="form.password" type="password" placeholder="输入密码" />
        <p v-if="errors.password" class="error">{{ errors.password }}</p>
      </div>
      <div class="form-item">
        <label>确认密码</label>
        <input v-model.trim="form.confirmPassword" type="password" placeholder="再次输入密码" />
        <p v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</p>
      </div>
      <p v-if="errors.api" class="error api-error">{{ errors.api }}</p>
      <button class="submit-btn" :disabled="isSubmitting">{{ isSubmitting ? '注册中...' : '注册' }}</button>
      <div class="switch-tip">
        已有账号？<a @click.prevent="router.push('/login')" href="#">去登录</a>
      </div>
    </form>
  </div>
</template>

<style scoped>
.auth-container {
  max-width: 420px;
  margin: 40px auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.auth-title {
  margin: 0 0 16px 0;
  color: #e63946;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-item {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 6px;
  font-weight: 600;
}
input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
}
input:focus {
  border-color: #e63946;
}
.submit-btn {
  margin-top: 8px;
  padding: 10px 14px;
  background: #e63946;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.submit-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}
.error {
  color: #d32f2f;
  font-size: 12px;
  margin-top: 6px;
}
.api-error {
  text-align: center;
}
.switch-tip {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}
.switch-tip a {
  color: #e63946;
  cursor: pointer;
}
</style>
